<template>
  <div class="scroing-wapper">
    <h3>{{title}}</h3>
    <el-form label-position="top" label-width="80px" :model="form">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item :label="$t('configLazyLoad.qualityCheck.qualityTempName')">
            <el-input :maxlength="20" v-model.trim="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('configLazyLoad.qualityCheck.qualityTempType')">
            <el-radio-group v-model="form.QUALITY_TYPE">
              <el-radio label="qualityCall">{{$t('routeI18n.callBlank')}}</el-radio>
              <el-radio label="qualityWebchat">{{$t('routeI18n.webchat')}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <affix :label="$t('config.account.baseMsg')">
      </affix>
        <el-form-item class="memo" :label="$t('agentSetting.agentSetting43')">
          <el-input type="textarea" v-model="form.memo"></el-input>
        </el-form-item>
        <el-row :gutter="20" v-for="(item,index) of form.gradeConfig" :key='index'>
          <el-col :span="8">
            <el-form-item>
              <el-row :gutter="10" v-if="item.begin==0&&item.begin!==''">
                <el-col :span="9">
                  <el-button type='text' @click="addScore">{{$t('public.add')}}</el-button>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="9">
                  <el-input size="mini" v-model="item.name" :maxlength="8" :minlength="2">
                  </el-input>
                </el-col>
                <el-col :span="6">
                   <i class="el-icon-close" v-if="item.begin!==0&&item.end!==100" @click="levelDelete(index)"></i>
                </el-col>
              </el-row>   
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-input size="mini" :maxlength="2" v-model="item['end']" :disabled="item['end']==100?true:false"><template slot="append">{{$t('configLazyLoad.qualityCheck.score')}}</template></el-input>
                </el-col>
                <el-col class="bet" :span="4">
                </el-col>
                <el-col :span="10">
                  <el-input size="mini" :min="1" @input="item['begin']==0?item['begin']='':item['begin']" :maxlength="2" v-model="item['begin']" :disabled="item['begin']==0&&item['begin']!==''?true:false"><template slot="append">{{$t('configLazyLoad.qualityCheck.score')}}</template></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      <affix :label="$t('qualityCheck.quality')">
      </affix>
        <el-row class="qua-option" v-if="form.config && form.config.length>0" :gutter="20">
          <el-col :span="10">
            <el-form-item :label="$t('configLazyLoad.qualityCheck.name')">
              <el-input v-model.trim="form.config[0].name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('configLazyLoad.qualityCheck.weight')">
              <el-input class="weight" :maxlength="2" v-model="form.config[0].weight"><template slot="append">%</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=" ">
              <el-checkbox v-model="form.config[0].fatal">{{$t('configLazyLoad.qualityCheck.isFatal')}}</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label=" ">
              <el-button type="text"><i class="el-icon-plus" @click.stop="addConfigData"></i></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="qua-option" :gutter="20" v-for="(item, index) in form.config" >
          <template v-if="index!==0">
             <el-col :span="10">
              <el-form-item label="">
                <el-input v-model.trim="item.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-input class="weight" :maxlength="2" v-model="item.weight"><template slot="append">%</template></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <el-checkbox v-model="item.fatal">{{$t('configLazyLoad.qualityCheck.isFatal')}}</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="">
                <el-button type="text"><i class="el-icon-minus" @click.stop="delConfigData(index)"></i></el-button>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      <el-col :span="24" class="button-group">
        <el-button type="primary" class="primary_btn" @click.stop="submitForm">{{$t('public.save')}}</el-button>
        <el-button class="primary_btn mar-left" @click.stop="resetForm">{{$t('public.cancel')}}</el-button>
      </el-col>
    </el-form>
  </div>
</template>

<script>
  import Affix from '@/components/ui-modules/affix/Affix'
  export default {
    name: 'ScoringTemplate',
    data () {
      return {
        defaultScoreTop: 100,
        defaultScorebottom: 0,
        form: {
          _id: '',
          enable: '',
          name: '',
          QUALITY_TYPE: 'qualityCall',
          memo: '',
          'A-begin': 95,
          'B-begin': 80,
          'B-end': 94,
          'C-begin': 60,
          'C-end': 79,
          'D-end': 59,
          config: [{
            order: 1,
            name: this.$t('configLazyLoad.qualityCheck.professionalLevel'),
            weight: 40,
            fatal: false
          }, {
            order: 2,
            name: this.$t('configLazyLoad.qualityCheck.attitude&tone'),
            weight: 30,
            fatal: false
          }, {
            order: 3,
            name: this.$t('configLazyLoad.qualityCheck.solutionLevel'),
            weight: 30,
            fatal: false
          }]
        },
        scoreIndex:0
      }
    },
    props: {
      initData: {
        type: Object,
        default: function () {
          return {
            _id: '',
            enable: '',
            name: '',
            QUALITY_TYPE: 'qualityCall',
            memo: '',
            'A-begin': 95,
            'B-begin': 80,
            'B-end': 94,
            'C-begin': 60,
            'C-end': 79,
            'D-end': 59,
            config: [{
              order: 1,
              name: this.$t('configLazyLoad.qualityCheck.professionalLevel'),
              weight: 40,
              fatal: false
            }, {
              order: 2,
              name: this.$t('configLazyLoad.qualityCheck.attitude&tone'),
              weight: 30,
              fatal: false
            }, {
              order: 3,
              name: this.$t('configLazyLoad.qualityCheck.solutionLevel'),
              weight: 30,
              fatal: false
            }]
          }
        }
      },
      title: {
        type: String,
        default: function () {
          return this.$t('configLazyLoad.qualityCheck.addScoringTemplate')
        }
      }
    },
    watch: {
      initData (cur) {
        this.form = JSON.parse(JSON.stringify(cur))
      }
    },
    components: {
      Affix
    },
    methods: {
      validateForm () {
        let form = this.form
        if (!form.name) {
          return this.$t('configLazyLoad.qualityCheck.templateNameCannotBeEmpty')
        }
        for(let i=0;i<form.gradeConfig.length;i++){
          var regs = /^([0-9a-zA-Z)|([\u4e00-\u9fa5]){1,8}$/;
          if(!regs.test(form.gradeConfig[i].name)){
            return form.gradeConfig[i].name+'命名有误，请输入2-8位中英文数字'
          }
          if(i!==form.gradeConfig.length-1){
            if (isNaN(form.gradeConfig[i]['end'])) {
              return form.gradeConfig[i-1].name + this.$t('configLazyLoad.qualityCheck.startScoreError')
            }
            if (isNaN(form.gradeConfig[i]['begin'] || +form.gradeConfig[i]['begin'] <= +form.gradeConfig[i+1]['end'])) {
              return form.gradeConfig[i].name + this.$t('configLazyLoad.qualityCheck.endScoreError')
            }
            if (+form.gradeConfig[i]['begin'] >= +form.gradeConfig[i]['end']) {
              return form.gradeConfig[i].name + this.$t('configLazyLoad.qualityCheck.startScoreMustBeGreater')
            }
            if (+form.gradeConfig[i]['begin'] !== +form.gradeConfig[i+1]['end'] + 1) {
              return form.gradeConfig[i+1].name + this.$t('configLazyLoad.qualityCheck.scoreMustBeContinuous')
            }
          }
        }
        let valueZero = ''
        form.config.forEach(item => {
          if (!valueZero && parseInt(item.weight) < 0) {
            valueZero = this.$t('configLazyLoad.qualityCheck.weightMustBeGreaterThan0')
          }
          if (!valueZero && !item.name) {
            valueZero = this.$t('configLazyLoad.qualityCheck.qualityItemNameIsRequired')
          }
        })
        if (valueZero) {
          return valueZero
        }
        let msg = ''
        let sum = form.config.reduce((sum, value) => {
          if (value.weight === '') {
            msg = this.$t('configLazyLoad.qualityCheck.weightIsRequired')
          }
          return sum + parseInt(value.weight)
        }, 0)
        if (msg) return msg
        if (sum !== 100) {
          return this.$t('configLazyLoad.qualityCheck.weightSumMustBe100')
        }
      },
      resetForm () {
        this.form = JSON.parse(JSON.stringify(this.initData))
      },
      delConfigData (index) {
        this.form.config.splice(index, 1)
      },
      addConfigData () {
        this.form.config.push({
          name: '',
          weight: 30,
          fatal: false
        })
      },
      submitForm () {
        let msg = ''
        msg = this.validateForm()
        if (msg) {
          this.$message.error(msg)
          return null
        }
        let form = JSON.parse(JSON.stringify(this.form))
        form.config = form.config.map((item, index) => {
          item.order = index + 1
          return item
        })
        this.$emit('save', form)
        this.resetForm()
      },
      //添加
      addScore(){
        this.form.gradeConfig.splice(this.form.gradeConfig.length-1,0,{
          name:'',
          begin:'',
          end:'',
        })
      },
      //删除
      levelDelete(index){
        this.$confirm(this.$t('configLazyLoad.qualityCheck.deleteTip'),this.$t('public.tip'), {
          confirmButtonText: this.$t('configLazyLoad.businessConfig.sureBtn'),
          cancelButtonText: this.$t('configLazyLoad.robotSeven.cancel'),
          type: 'warning'
        }).then(() => {
          this.form.gradeConfig.splice(index,1)
          this.$message({
            type: 'success',
            message: this.$t('message.deleteSucc')
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('sms.cancelDel')
          });          
        })
      }
    },
    beforeMount () {
      // 初始化数据 当为编辑的时候
      this.form = JSON.parse(JSON.stringify(this.initData))
    }
  }
</script>
<style lang="stylus">
.scroing-wapper
  .el-col-10
    .el-input-group__append
      padding 0 5px
  .ui-affix
    padding-bottom 5px
</style>
<style lang="stylus" scoped>
  @import '../base'
  @import "../../../../../assets/common"
  .el-form
    margin-top 16px
  .memo
    margin-bottom 12px
  .el-icon-plus
    color $c-main
  .el-icon-minus
    color $c-pink
  .bet
    &:before
      content: ''
      display inline-block
      width 10px
      height 1px
      margin 3px 6px
      background $cf-gray5
</style>
